<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="header">
      <text class="header-title">实时监控</text>
      <view class="farm-selector" @tap="showFarmSelector">
        <text>{{ currentFarmName }}</text>
        <text class="iconfont icon-down"></text>
      </view>
    </view>
    
    <!-- 摄像头视图 -->
    <view class="camera-view">
      <image 
        class="main-camera" 
        :src="currentCamera.snapshot" 
        mode="aspectFill"
      ></image>
      
      <view class="camera-info">
        <view class="camera-name">
          <text>{{ currentCamera.name }}</text>
          <view class="camera-status" :class="currentCamera.status">
            <view class="status-dot"></view>
            <text>{{ currentCamera.status === 'online' ? '在线' : '离线' }}</text>
          </view>
        </view>
        
        <view class="camera-controls">
          <view class="control-btn" @tap="refreshCamera">
            <text class="iconfont icon-refresh"></text>
          </view>
          <view class="control-btn" @tap="takeSnapshot">
            <text class="iconfont icon-camera"></text>
          </view>
          <view class="control-btn view-btn" @tap="viewCamera">
            <text class="iconfont icon-eye"></text>
            <text class="btn-text">查看</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 摄像头选择器 -->
    <scroll-view scroll-x="true" class="camera-selector" show-scrollbar="false">
      <view 
        v-for="(camera, index) in cameras" 
        :key="index"
        class="camera-item"
        :class="{ active: currentCameraId === camera.id }"
        @tap="selectCamera(camera.id)"
      >
        <image class="camera-thumb" :src="camera.snapshot" mode="aspectFill"></image>
        <text class="camera-label">{{ camera.name }}</text>
      </view>
    </scroll-view>
    
    <!-- 环境数据概览 -->
    <view class="env-data">
      <view class="env-data-header">
        <text>环境数据</text>
      </view>
      
      <view class="env-data-grid">
        <view class="env-data-item">
          <text class="iconfont icon-temperature"></text>
          <view class="env-data-content">
            <text class="env-data-label">温度</text>
            <text class="env-data-value">{{ envData.temperature }}°C</text>
          </view>
        </view>
        
        <view class="env-data-item">
          <text class="iconfont icon-humidity"></text>
          <view class="env-data-content">
            <text class="env-data-label">湿度</text>
            <text class="env-data-value">{{ envData.humidity }}%</text>
          </view>
        </view>
        
        <view class="env-data-item">
          <text class="iconfont icon-light"></text>
          <view class="env-data-content">
            <text class="env-data-label">光照</text>
            <text class="env-data-value">{{ envData.light }}lux</text>
          </view>
        </view>
        
        <view class="env-data-item">
          <text class="iconfont icon-soil"></text>
          <view class="env-data-content">
            <text class="env-data-label">土壤湿度</text>
            <text class="env-data-value">{{ envData.soilMoisture }}%</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';

// 农场数据
const farms = [
  { id: 1, name: '绿源农场1号' },
  { id: 2, name: '绿源农场2号' },
  { id: 3, name: '蔬菜大棚基地' }
];

const currentFarmId = ref(1);

const currentFarmName = computed(() => {
  const farm = farms.find(f => f.id === currentFarmId.value);
  return farm ? farm.name : '选择农场';
});

// 摄像头数据
const cameras = [
  { 
    id: 1, 
    name: '大棚1号', 
    status: 'online',
    snapshot: '/static/cctv/dp1.jpg'
  },
  { 
    id: 2, 
    name: '大棚2号', 
    status: 'online',
    snapshot: '/static/cctv/dp2.jpg'
  },
  { 
    id: 3, 
    name: '仓库', 
    status: 'online',
    snapshot: '/static/cctv/ck1.jpg'
  },
  { 
    id: 4, 
    name: '农田', 
    status: 'offline',
    snapshot: '/static/cctv/land.jpg'
  }
];

const currentCameraId = ref(1);

const currentCamera = computed(() => {
  return cameras.find(c => c.id === currentCameraId.value) || cameras[0];
});

// 环境数据
const envData = ref({
  temperature: '26.5',
  humidity: '65',
  light: '32000',
  soilMoisture: '42'
});

// 显示农场选择器
const showFarmSelector = () => {
  uni.showActionSheet({
    itemList: farms.map(farm => farm.name),
    success: (res) => {
      currentFarmId.value = farms[res.tapIndex].id;
    }
  });
};

// 选择摄像头
const selectCamera = (id) => {
  currentCameraId.value = id;
};

// 刷新摄像头
const refreshCamera = () => {
  uni.showToast({
    title: '画面已刷新',
    icon: 'success',
    duration: 1500
  });
};

// 截图
const takeSnapshot = () => {
  uni.showToast({
    title: '截图已保存',
    icon: 'success',
    duration: 1500
  });
};

// 查看摄像头
const viewCamera = () => {
  uni.navigateTo({
    url: '/pages/camera/camera'
  });
};

// 底部标签导航
const goToTab = (url) => {
  uni.switchTab({ url });
};
</script>

<style>
/* 全局样式 */
page {
  background-color: #f5f7fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: 60px;
}

/* 顶部导航栏 */
.header {
  display: flex;
  flex-direction: column;
  padding: 15px;
  background-color: #4CAF50;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 5px;
}

.farm-selector {
  display: flex;
  align-items: center;
}

.farm-selector text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.farm-selector .iconfont {
  font-size: 12px;
  margin-left: 5px;
}

/* 摄像头视图 */
.camera-view {
  position: relative;
  background-color: #000000;
  margin-bottom: 10px;
}

.main-camera {
  width: 100%;
  height: 210px;
  display: block;
}

.camera-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
}

.camera-name {
  display: flex;
  flex-direction: column;
}

.camera-name text:first-child {
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 5px;
}

.camera-status {
  display: flex;
  align-items: center;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  margin-right: 4px;
}

.camera-status.online .status-dot {
  background-color: #4CAF50;
}

.camera-status.offline .status-dot {
  background-color: #9E9E9E;
}

.camera-status text {
  font-size: 12px;
  color: #ffffff;
}

.camera-controls {
  display: flex;
}

.control-btn {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}

.control-btn .iconfont {
  font-size: 18px;
  color: #ffffff;
}

/* 摄像头选择器 */
.camera-selector {
  white-space: nowrap;
  padding: 10px;
  background-color: #ffffff;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-around;
}

.camera-item {
  display: inline-block;
  width: 23%;
  margin: 0 5px;
}

.camera-thumb {
  width: 100%;
  height: 80px;
  border-radius: 4px;
  display: block;
  object-fit: cover;
}

.camera-item.active .camera-thumb {
  border: 2px solid #4CAF50;
}

.camera-label {
  font-size: 12px;
  color: #666666;
  text-align: center;
  margin-top: 5px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 环境数据 */
.env-data {
  background-color: #ffffff;
  margin-bottom: 10px;
  padding: 15px;
}

.env-data-header {
  margin-bottom: 15px;
}

.env-data-header text {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.env-data-grid {
  display: flex;
  flex-wrap: wrap;
}

.env-data-item {
  width: 50%;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.env-data-item .iconfont {
  font-size: 24px;
  color: #4CAF50;
  margin-right: 10px;
}

.env-data-content {
  display: flex;
  flex-direction: column;
}

.env-data-label {
  font-size: 12px;
  color: #999999;
}

.env-data-value {
  font-size: 16px;
  color: #333333;
}
</style>